<template>
  <div class="wrapper">
    <JTable :table-list="treeData" :config="tableConfig">
      <template slot="Actions" slot-scope="{row}">
        <el-button v-if="showBtn(row)" type="text" @click="handleActive(row,'showpower')">权限配置</el-button>
      </template>
      <template slot="icon" slot-scope="{row}">
        <i :class="row.icon" />
      </template>
    </JTable>

    <el-drawer
      :title="`[${currentItem.functionName}] ${dialog.title[dialog.active]}`"
      :visible.sync="dialog.dialogVisible"
      size="70%"
      destroy-on-close
    >
      <powerList :current-item="currentItem" />
    </el-drawer>
  </div>
</template>
<script>
import { getChildren } from '@/api/menus'
import powerList from './widget/powerList'
import JTable from '@/components/JTable'

export default {
  name: 'DataPower',
  components: {
    powerList,
    JTable
  },
  props: {},
  data() {
    const listQuery = {
      total: 0,
      page: 1,
      size: 10,
      handleFilter: this.getList
    }
    const dialog = {
      dialogVisible: false,
      active: '',
      title: { showpower: '数据权限' }
    }
    return {
      listLoading: false,
      dialog,
      listQuery,
      currentItem: {},
      list: [],
      selectedItem: {},
      tableConfig: {
        listLoading: this.listLoading,
        pagination: listQuery,
        tableAttribute: {
          'row-key': 'id',
          'tree-props': { children: 'children', hasChildren: '_' }
        },
        search: ['functionName', 'code'],
        thead: [
          {
            type: 'selection'
          },
          {
            type: 'index',
            label: '-',
            start: 1
          },
          {
            prop: 'functionName',
            label: '菜单名称',
            width: 200,
            align: 'left'
          },
          {
            prop: 'code',
            label: '菜单编码'
          },
          {
            prop: 'url',
            label: '路径'
          },
          {
            prop: 'icon',
            label: '图标',
            slot: true,
            align: 'center'
          },
          // {
          //   prop: 'functionLevel',
          //   label: '菜单级别'
          // },
          // {
          //   prop: 'sort',
          //   label: '排序'
          // },
          {
            prop: 'remark',
            label: '说明'
          },
          {
            prop: '',
            label: 'Actions',
            type: 'actions',
            width: '300',
            align: 'center',
            slot: true
          }
        ],
        activeBox: {
          defaultBtn: false
        }
      }
    }
  },
  computed: {
    treeData() {
      const data = this.list
      const result = data
      return result
    }
  },
  watch: {},
  created() {
    this.getList()
  },
  mounted() { },
  methods: {
    handleActive(target, type) {
      this.setCurrentItem(target)
      if (type === 'showpower') {
        this.showDialog('showpower')
      }
    },
    showBtn(row) {
      if (!(row.url) || row.url === '/' || /^http/.test(row.url) || row.hasChildren) {
        return false
      }
      return true
    },
    getList(args = {}) {
      console.log(args)
      const { page: pageNum = 1, size: pageSize = 10, ...param } = args
      const params = { pageNum, pageSize, isMenu_eq: 1, ...param }
      getChildren(params).then(res => {
        const { data, code } = res
        if (code === 200) {
          this.list = data
        }
      })
    },
    handleCreated() {
      this.setCurrentItem()
      this.showDialog()
    },
    setCurrentItem(item = {}) {
      this.currentItem = item
    },
    showDialog(target = 'created') {
      this.dialog.active = target
      this.dialog.dialogVisible = true
    },
    closeDialog() {
      this.setCurrentItem()
      this.dialog.active = ''
      this.dialog.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0;
   margin: 0px;
}
</style>
